<template>
  <div id="home" class="wrapper">
    <nav-bar class="home-nav">
      <div slot="center">购物街</div>
    </nav-bar>
    <tab-control :titles="['流行','新款','精选']"
                 @tabClick='tabClick'
                 ref="tabControl1"
                 class="tab-control"
                 v-show="isTabFixed"></tab-control>
<!--    content用于设置可滚动的高度-->
<!--    probe-type在组件中采用了驼峰写法，所以在此处传值时用-分割-->
<!--    在需要监听滚动的组件传值probe-type-->
    <scroll class="content"
            ref="scroll"
            :probe-type="3"
            @scroll="contentScroll"
            :pull-up-load="true"
            @pullingUp="loadMore">
      <home-swiper :banners="banners" @swiperImageLoad="swiperImageLoad"></home-swiper>

      <recommend-view :recommends="recommends"></recommend-view>

      <feature-view></feature-view>

      <tab-control :titles="['流行','新款','精选']"
                   @tabClick='tabClick'
                   ref="tabControl2"
                   ></tab-control>

      <goods-list :goods="showGoods"></goods-list>
    </scroll>

<!--    此按钮不需要跟随滚动，所以不用放在scoll-->
<!--    @click.native="backclick"监听组件的点击事件-->
<!--    .stop-调用event.stopPropagation()-->
<!--    .prevent-调用event.preventDefault()-->
<!--    .{keyCode | keyAlias}-只当事件是从特定键触发时才触发回调-->
<!--    .native-监听组件根元素的原生事件，如点击事件-->
<!--    .once-只触发一次回调-->
<!--    v-show为false时不展示-->
    <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>
  </div>


</template>

<script>

import HomeSwiper from './childComps/HomeSwiper.vue'
import RecommendView from './childComps/RecommendView.vue'
import FeatureView from './childComps/FeautureView'


import NavBar from 'components/common/navbar/NavBar'
import Scroll from "components/common/scroll/Scroll";
import TabControl from 'components/content/tabCortrol/TabControl.vue'
import GoodsList from 'components/content/goods/GoodsList.vue'


import {getHomeMultidata,getHomeGoods,getHomeGoods1,getHomeGoods2} from "network/home"
import {debounce} from "common/utils";
import {itemListenerMixin,backTopMixin} from "common/mixin";


export default {
  name: "Home",
  // 组件注册
  components: {
    NavBar,
    HomeSwiper,
    RecommendView,
    FeatureView,
    TabControl,
    GoodsList,
    Scroll
  },
  data () {
    return {
      // result: null
      // 轮播图数据
      banners: [],
      // 推荐数据
      recommends: [],
      // 商品数据
      goods: {
        pop:{switchStatus_eq:1,page:0,list:[]},
        news:{switchStatus_eq:3,page:0,list:[]},
        sell:{switchStatus_eq:6,page:0,list:[]},
      },
      // 默认的currentType
      currentType: 'pop',
      // tab-control距离顶部的值
      tabOffsetTop: 0,
      // 设置为false，默认不需要吸顶效果
      isTabFixed: false,
      saveY:0,
    }
  },
  mixins:[itemListenerMixin,backTopMixin],

  // this.goods[this.currentType].list写在标签中时太长，采用计算属性进行精简
  computed: {
    showGoods() {
      // 将对应的列表传给goods
      return this.goods[this.currentType].list
    }
  },

  // 创建组件成功后，发送请求
  created () {
    //1.请求多个首页数据
    this.getHomeMultidata()
    // // 2.请求商品数据
    this.getHomeGoods('pop')
    this.getHomeGoods('news')
    this.getHomeGoods('sell')
  },
  // 切换url之后，前一个路由会被销毁,在app.vue中用<keep-alive>包裹router-view就不会触发销毁
  destroyed() {
    console.log('home路由销毁')
  },
  activated() {
    // console.log('活跃的')
    this.$refs.scroll.scrollTo1(0,this.saveY,0)
    this.$refs.scroll.refresh()
  },
  deactivated() {
    // 1.离开时，保存y值
    // console.log('不活跃');
    this.saveY = this.$refs.scroll.getScrollY()
    // console.log(this.saveY)
    // 2.取消全局事件监听
    // 注意，要传入一个函数
    this.$bus.$off('itemImageLoad',this.itemImgListener)
  },
  // 不要在created中进行获取值监听，会出现监听不到的情况
  mounted() {
    // // 将会频繁调用的函数传递给防抖函数
    // const resresh=debounce(this.$refs.scroll.refresh,300)
    // // 3.监听item中图片加载
    // this.itemImgListener = () => {
    //   resresh()
    // }
    // this.$bus.$on('itemImageLoad',
    //   // 封装一个函数，在执行某一个函数之前，搞一个定时器，让要执行的函数等一会再执行
    //   // 执行封装的防抖函数
    //   this.itemImgListener
    // )
  },

  methods: {
// 事件监听相关方法
//     1监听首页三个tab点击，点击那个，就赋值给currentType，用于获取数据
    tabClick(index) {
      switch (index) {
        case 0:
          this.currentType = 'pop'
          break
        case 1:
          this.currentType = 'news'
          break
        case 2:
          this.currentType = 'sell'
          break
      }
      // 将home组件点击的值赋值回给tabControl组件
      this.$refs.tabControl1.currentIndex = index;
      this.$refs.tabControl2.currentIndex = index;
    },

    // 3监听滚动坐标，滚动到一定的位置满足条件时就为true，用于显示返回顶部按钮
    contentScroll(position){
      // 0.1判断backTop是否显示
      this.listenShowBackTop(position)

      // 0.2决定tabCintrol是否吸顶展示，大于时就展示为true，小于时修改为false
      this.isTabFixed = (-position.y) > this.tabOffsetTop
    },
    //4 监听上拉加载更多
    loadMore() {
      // 触发时调用对应请求，获取加载数据
      this.getHomeGoods(this.currentType)
    },
    // 监听轮播图加载
    swiperImageLoad() {
      // 2.获取tabControl的offsetTop
      // 所有组件都有一个属性$el,用于获取组件中的元素
      this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop;
    },

// 网络请求相关
    //1.请求多个首页数据
    getHomeMultidata() {
      getHomeMultidata().then(res => {
        // 函数调用完成之后，有回收机制，要将返回值保存到data才能使用
        // console.log(res)
        // this.result = res;
        // 轮播图
        this.banners = res.data[0].moduleData
        // 推荐
        this.recommends = res.data[1].moduleData.splice(0,4)
      })
    },
    // 2请求商品数据
    getHomeGoods(type) {
      const switchStatus_eq=this.goods[type].switchStatus_eq
      const page = this.goods[type].page + 1
      // 2.请求商品数据
      getHomeGoods(switchStatus_eq,page).then(res => {
        // 解析数组元素，并将其塞到原有新的数组中
        this.goods[type].list.push(...res.data)
        this.goods[type].page += 1
        // 完成上拉加载更多
        this.$refs.scroll.finishPullUp()
      })
    }
  }
}
</script>

<!--scoped中的样式只对当前组件中的对应元素起效-->
<style scoped>
  #home {
    /*padding-top: 44px;*/
    /*适可高度*/
    height: 100vh;
    /*相对定位*/
    position: relative;
  }

  .home-nav {
    background-color: var(--color-tint);
    color: #fff;

    /*在使用浏览器原生滚动时，为了让导航不跟随滚动时使用，使用滚动组件时，不需要专门设置*/
    /*position: fixed;*/
    /*left: 0;*/
    /*right: 0;*/
    /*top: 0;*/
    /*z-index: 9;*/
  }

  .content{
    overflow: hidden;
    /*绝对定位,要在上层盒子配置相对定位*/
    position: absolute;
    /*距离顶部*/
    top: 44px;
    /*距离底部*/
    bottom: 49px;
    left: 0;
    right: 0;
  }

  .tab-control {
    /*相对定位*/
    position: relative;
    z-index: 9;
  }
</style>
